import React, { useState, useEffect, useMemo } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import { useDebounce, is_empty, obj_str, GridTable, loc, filter_row, PanelFind, for_obj, Btn } from "sui";

/* width: xs, sm, md, lg, xl
*/
const KDlg = ({ htp, form, data, open, setOpen, hcmd, title, children, width="sm", ck }) => {
    const hok = () => {
        if (form.isErr(ck)) {
            return;
        }

        const ret = {};

        for_obj(ck, (k) => {
            if (k === "start" || k === "end") {
                ret[k] = form.get(k, false);
            }
            else {
                ret[k] = form.get(k);
            }

            if (htp) {
                const tmp = htp();
                const tp = obj_str(tmp, k);
                if (tp === "num") {
                    ret[k] = parseInt(ret[k], 10);
                }
            }
        })

        form.clear();
        setOpen(false);
        hcmd(ret);
    };

    const hfunc = useDebounce(hok);

    const hcancel = () => {
        form.clear();
        setOpen(false);
    };

    return (
        <Dialog
            maxWidth={width}
            keepMounted
            disableEscapeKeyDown
            fullWidth={true}
            onClose={(event, reason) => {
                if (reason !== 'backdropClick') {
                    hfunc();
                }
            }}
            open={open}>
            <DialogTitle>{title}</DialogTitle>
            <DialogContent dividers>
                {children}
            </DialogContent>
            <DialogActions>
                <Btn hcmd={hcancel}>{loc("l_227")}</Btn>
                <Btn hcmd={hfunc}>{loc("l_541")}</Btn>
            </DialogActions>
        </Dialog>
    );
};

const DlgFind = ({ open, setOpen, data, main, hcmd, title, width="sm", c1="SN", c2=loc("l_228"), ext=[] }) => {
    const [filter, setFilter] = useState();
    const [select, setSelect] = useState();

    useEffect(() => {
        setFilter("");

        if (data) {
            setSelect(data);
        } else {
            setSelect(null);
        }
    }, [data]);

    const getRow = useMemo(() => {
        const lst = ["sn", "name"];
        return filter_row(main, lst, filter);
    }, [main, filter]);

    const hok = () => {
        const f = main.find(d => d.sn === select);
        setOpen(false);
        if (f) {
            hcmd(f.sn);
        }
    };

    const hfunc = useDebounce(hok);

    const hcancel = () => {
        setFilter("");
        setSelect(null);
        setOpen(false);
    };

    const col = [
        {name: c1, key: 'sn', width: 260},
        {name: c2, key: 'name', width: is_empty(ext) ? 260 : 100},
        ...ext,
    ];

    const hclick = (v) => {
        if (!v) {
            return;
        }

        setSelect(v.sn);
    };

    return (
        <Dialog
            maxWidth={width}
            keepMounted
            disableEscapeKeyDown
            fullWidth={true}
            onClose={(event, reason) => {
                if (reason !== 'backdropClick') {
                    hfunc();
                }
            }}
            open={open}>
            <DialogTitle>{title}</DialogTitle>
            <DialogContent dividers>
                <PanelFind hcmd={setFilter}/>
                <GridTable high={400} col={col} row={getRow} hclick={hclick} hlight={v => v.sn === select} fit={false}/>
            </DialogContent>
            <DialogActions>
                <Btn hcmd={hcancel}>{loc("l_227")}</Btn>
                <Btn hcmd={hfunc}>{loc("l_541")}</Btn>
            </DialogActions>
        </Dialog>
    );
};

export {DlgFind, KDlg};
